import { Component } from 'react';
import ReactDOM from 'react-dom/client';

/* 
  React 修改状态:
    核心语法：
      this.setState({ 键1:值1, 键2:值1 })

*/
class App extends Component {
  state = {
    count: 1,
  };

  // 使用箭头函数，声明时就绑定 this 指向
  addBtn = () => {
    // ✅修改成 10
    // this.setState({
    //   count: 10,
    // });

    // ✅在 count 值的基础上加 1
    this.setState({
      count: this.state.count + 1,
    });

    // ❌能实现视图的更新，但是非常不标准，后期维护不友好
    // this.state.count++;
    // console.log(this.state);
    // 主动更新UI，
    // this.setState({});
  };

  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.addBtn}>+</button>
      </div>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
